<template>
    <div class="food-left" @click="showItem()">
        <img :src=food.itemImg>
        <div class="food-left-info">
            <h3 class="foodName">{{food.itemName}}</h3>
            <p>{{food.itemDescription}}</p>
            <p class="price">&#165;{{food.shopItemPrice }}</p>
        </div>
    </div>
    <div class="food-right">
        <div>
            <font-awesome-icon :class="count<=0?'hidden':''" @click="updateCount(-1)" :icon="['fas', 'minus-circle']" style="color: #0097EF;" />
        </div>
        <p>{{count<=0?"":count}}</p>
        <div>
            <font-awesome-icon @click="updateCount(1)" :icon="['fas', 'plus-circle']" style="color: #0097EF;" />
        </div>
    </div>
</template>

<script setup>
import {ref, toRefs, watch} from "vue"

import {getSessionStorage} from "../common.js";

const emit = defineEmits(["updateCart"])
const props = defineProps(["food","shopId","itemQuantity"])
const {food,shopId,itemQuantity} = toRefs(props)
const count = ref(0)
const showItem = ()=>{
    console.log(food)
}
// 属性赋值
watch(itemQuantity,(value)=>{
    count.value = value
})

const updateCount = (op)=>{
    count.value = count.value + op
    food.value.quantity = count.value
    emit("updateCart",food.value)
}

</script>

<style scoped>
.food-left{
    display: flex;
    align-items: center;
}
.food-left img{
    width: 20vw;
    height: 20vw;
}
.food-left .food-left-info{
    margin-left: 3vw;
}
.food-left .food-left-info h3{
    font-size: 3.8vw;
    color: #555;
    text-align: left;
}
.food-left .food-left-info p{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
    text-align: left;
}
.food-right{
    width: 16vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.food-right .fa-minus-circle{
    font-size: 5.5vw;
    color: #999;
    cursor: pointer;
}
.food-right p{
    font-size: 3.6vw;
    color: #333;
}

.hidden{
    display: none;
    background-color: transparent;
}
</style>